<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                background-color: rgb(119, 115, 110);
            }
            ul {
                width: 100%;
                height: 1000px;
                margin: 100px auto 0;
                padding: 0;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                /*margin-top: -100px;*/
                list-style: none;
            }
            ul:hover {
                cursor: pointer;
            }
            li {
                position: absolute;
                left: 0;
                transition: 0.4s;
            }
        </style>
    </head>
    <body>
        <ul id="banner"></ul>
    </body>
    <script>
        var cur_ul = document.getElementById("banner");
        var arr = [];
        for (let i = 0; i < 9; i++) {
            var cur_li = document.createElement('li')
            var cur_img = document.createElement('img');
            cur_img.src = "./img/" + i + ".jpg";
            cur_img.style.width = '768px';
            cur_img.style.height = '960px';
            // cur_img.style.transform = "scale(1)"
            cur_li.appendChild(cur_img);
            cur_ul.appendChild(cur_li);
            //  鼠标移入停止轮播
            cur_ul.onmouseenter = function () {
                clearInterval(timer)
            }
            //  鼠标移出继续轮播 设置定时器
            cur_ul.onmouseleave = function () {
                timer = setInterval(getNext, 3000)
            }
            // 当创建完一个li（li里已经有img元素）就把li添加到arr数组里
            // arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li
            // 相当于对象的浅拷贝，指针指向问题
            arr.push(cur_li)
        }
        var len = arr.length - 1;
        //  左 中 右 三张图
        arr[len - 2].style.left = '0px';
        arr[len - 1].style.left = '400px';
        arr[len].style.left = '800px';
        arr[len-1].style.transform = 'scale(1.3)';
        arr[len-1].style.zIndex = 100;

        function getNext() {
            var giveUp = arr[arr.length - 1]
            arr.pop()
            arr.unshift(giveUp)
            arr.forEach((e)=>{
                console.log(e);
            })
            for (let i = 0; i < arr.length; i++) {
                arr[i].style.zIndex = i
                arr[i].style.transform = 'scale(1)'
            }
        //    这步就是展示arr的后三张图片，和前一个步骤一样
            arr[len - 2].style.left = '0px';
            arr[len - 1].style.left = '400px';
            arr[len].style.left = '800px';
            arr[len - 1].style.transform = 'scale(1.3)'
            arr[len - 1].style.zIndex = 100;
        }
        var timer = setInterval(getNext, 3000)

        var preImg = document.createElement('img');
        preImg.src = './img/LeftArrow.png'
        preImg.style.position = "absolute"
        preImg.style.top = "0";
        preImg.style.bottom = '0';
        preImg.style.margin = 0;
        preImg.style.zIndex = 100;
        // preImg.style.
        cur_ul.appendChild(preImg)
    </script>
</html>